{extends file="skulton.tpl"}{/extends}
{block name="monblock"}


<script src="scripts/js/Form.js"></script>
<script>

$(function() {
    
    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 500,
      modal: true,
      buttons: {
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

    $( ".modifier_materiel" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
      
          $( "#form_ajouter" ).dialog({
      autoOpen: false,
      height: 400,
      width: 500,
      modal: true,
      buttons: {
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
      
      $( "#Ajouter" )
      .button()
      .click(function() {
        $( "#form_ajouter" ).dialog( "open" );
      });
  });

</script>

<script type="text/javascript" charset="utf-8">
  var asInitVals = new Array();
   
  $(document).ready(function() {
  
  
  // Dialogue
  $('.modifier_materiel').click(function(){

      a= $('.id',this);
      var id= $(a[0]).text();
      $("#id").val(id);

      var a= $('.reference',this);
      var reference= $(a[0]).text();
      $("#reference").val(reference);

      a= $('.constructeur',this);
      var constructeur= $(a[0]).text();
      $("#constructeur").val(constructeur);
      
      a= $('.connecteur',this);
      var connecteur= $(a[0]).text();
      $("#connecteur").val(connecteur);
      
      a= $('.type',this);
      var type= $(a[0]).text();
      $("#type").val(type);
      
      a= $('.etat',this);
      var etat= $(a[0]).text();
      $("#etat").val(etat);
      
      a= $('.quantite',this);
      var quantite= $(a[0]).text();
      $("#quantite").val(quantite);

      a= $('.dateCommande',this);
      var dateCommande= $(a[0]).text();
      $("#dateCommande").val(dateCommande);

      a= $('.idNomade',this);
      var idNomade= $(a[0]).text();
      $("#idNomade").val(idNomade);
      
      
    });
    
      
     // Fin dialogue

      $(".yesno").click(function(){
        var a = $(this);
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            modal: true,
            buttons: {
              "Oui": function() {
                
                document.location.href="materielcommande.php?id_sup="+a.attr('id');
              },
              "Non": function() {
                $( this ).dialog( "close" );
              }
            }
        });
      });
  
  
  
    var oTable = $('#idtable').dataTable( {
      "sPaginationType": "full_numbers",
      "oLanguage": {
        "sSearch": "Rechercher:"
      }
    } );
     
     
    //recherche spécifique à la colone
    $("tfoot input").keyup( function () {
      /* Filter on the column (the index) of this element */
      oTable.fnFilter( this.value, $("tfoot input").index(this) );
    } );
     
     
     
    /*
     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
     * the footer
     */
    $("tfoot input").each( function (i) {
      asInitVals[i] = this.value;
    } );
     
    $("tfoot input").focus( function () {
      if ( this.className == "search_init" )
      {
        this.className = "";
        this.value = "";
      }
    } );
     
    $("tfoot input").blur( function (i) {
      if ( this.value == "" )
      {
        this.className = "search_init";
        this.value = asInitVals[$("tfoot input").index(this)];
      }
    } );
    
    
      
      // FORMULAIRE UI
      
      
      
      
    
  } );
</script>



    
<div class="content-box"><!-- Start Content Box -->
  
  <div class="content-box-header">
    
    <h3>Liste des matériels commandés</h3>
    
    <!-- Formulaire -->
    
    <div class="clear"></div>
    
  </div> <!-- End .content-box-:>header -->
  <div class="content-box-content">
        
      </div> <!-- End #messages -->

    <div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
    {if isset($message)}
      <div class="notification success png_bg">
        <a href="#" class="close"><img src="images/i/cross_grey_small.png" title="Close this notification" alt="close"></a>
        <div>
          {$message}
        </div>
      </div>
    {/if} 
      
  <div style="display:none;" id="dialog-confirm" title="Demande de confirmation">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Voulez-vous vraiment supprimer cet enregistrement ?</p>
  </div>

  
      <table id="idtable">
        
        <thead>
          <tr>
             <th><input class="check-all" type="checkbox" /></th>
             <th>id</th>
             <th>Réference</th>
             <th>Constructeur</th>
             <th>Connecteur</th>
             <th>Type</th>
             <th>Etat</th>
             <th>Quantité</th>
             <th>Date de Commande</th>
             <th>idNomade</th>
             <th>Opération</th>
          </tr>
          
        </thead>
      
       
        <tbody>
          {foreach $return as $line}
          <tr>
            <td><input type="checkbox" /></td>
            <td>{$line['id']}</td>
            <td>{$line['reference']}</td>
            <td>{$line['constructeur']}</td>
            <td>{$line['connecteur']}</td>
            <td>{$line['type']} </td>
            <td>{$line['etat']}</td>
            <td>{$line['quantite']}</td>
            <td>{$line['dateCommande']}</td>
            <td>{$line['idNomade']}</td>
            <td>
              <!-- Icons -->
               <a href="#dialog-form" class="modifier_materiel" ><img src="images/icons/pencil.png" alt="Edit"  />
                <span class="id" style="display:none">{$line['id']}</span>
                <span class="reference" style="display:none">{$line['reference']}</span>
                <span class="constructeur" style="display:none">{$line['constructeur']}</span>
                <span class="connecteur" style="display:none">{$line['connecteur']}</span>
                <span class="type" style="display:none">{$line['type']}</span>
                <span class="etat" style="display:none">{$line['etat']}</span>
                <span class="etat" style="display:none">{$line['quantite']}</span>
                <span class="etat" style="display:none">{$line['dateCommande']}</span>
                <span class="etat" style="display:none">{$line['idNomade']}</span>
                
  
               </a>
               <a href="#" title="Delete" class="yesno with-tip supp" id="{$line['id']}"><img src="images/icons/cross.png" alt="Delete" /></a>
               
              <!-- <a href="#" title="Edit Meta"><img src="images/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> -->
            </td>
          </tr>
          
          {/foreach}
          
        </tbody>
        
        <tfoot>
          <tr>
            <th><input type="text" name="search_id" value="" class="search_int" style="display:none" /></th>
            <th><input type="text" name="search_id" value="" class="search_int" style="display:none" /></th>
            <th><input type="text" name="search_reference" value="" class="search_int" /></th>
            <th><input type="text" name="search_constructeur" value="" class="search_int" /></th>
            <th><input type="text" name="search_connecteur" value="" class="search_int"  /></th>
            <th><input type="text" name="search_type" value="" class="search_int" style="display:none" /></th>
            <th><input type="text" name="search_etat" value="" class="search_int"  /></th>
            <th><input type="text" name="search_quantite" value="" class="search_int"  /></th>
            <th><input type="text" name="search_dateCommande" value="" class="search_int"  /></th>
            <th><input type="text" name="search_idNomade" value="" class="search_int"  /></th>
            <th><input type="text" name="search_operations" value="" class="search_int" style="display:none"/></th>
            
            
          </tr>
        </tfoot>
        
      </table>
      
      <div id="dialog-form" title="Modifier Matériel" class="reformed-form"> <!-- Messages are shown when a link with these attributes are clicked: href="#messages" rel="modal"  -->
        
        <form method="post" name="Form" id="Form" action="materielcommande.php">
    <fieldset id="fl1" class="fl1" style=" width: 90%">
      <legend>Modifier</legend>
      <input type="hidden" name="id" value="1" id="id" />
          <dl>
          <dt>
          <label for="reference" style="font-size: 15px;">Réference</label>
          </dt>
          <dd><input type="text" id="reference" class="reference required  " name="reference" /></dd>
          </dl>
          <dl>
          <dt>
          <label for="constructeur" style="font-size: 15px;">Constructeur</label>
          </dt>
          <dd><input type="text"  class="constructeur required" name="constructeur" id="constructeur" /></dd>
          </dl>
          <dl>
          <dt>
          <label for="connecteur" style="font-size: 15px;">Connecteur</label>
          </dt>
          <dd><input type="text" id="connecteur" class="connecteur required" name="connecteur" /></dd></dd>
          </dl>
          <dl>
          <dt>
          <label for="type" style="font-size: 15px;">Type</label>
          </dt>
          <dd><select id="type"  class="type required " name="type">
                <option value="carte_reseau"> Carte réseau</option>
                <option value="concentrateur">Concentrateur(Hub)</option>
                <option value="commutateur">Commutateur(switch)</option>
                <option value="routeur">Routeur</option>
                <option value="repeteur">Répéteur</option>
                <option value="cableethernet">Câbles Ethernet</option>
                <option value="armoire">Armoire</option>
              </select></dd></dd>
             </dl>
          <dl>
          <dt>
          <label for="etat" style="font-size: 15px;">Etat</label>
          </dt>
          <dd><input type="text" id="etat"  class="etat required" name="etat" /></dd></dd>
          </dl>
      
          <dl>
          <dt>
          <label for="quantite" style="font-size: 15px;">Quantité</label>
          </dt>
          <dd><input type="text" id="quantite"  class="quantite required" name="quantite" /></dd></dd>
          </dl>

          <dl>
          <dt>
          <label for="dateComande" style="font-size: 15px;">Date de commande</label>
          </dt>
          <dd><input type="text" id="dateComande"  class="dateComande required" name="dateComande" /></dd></dd>
          </dl>

          <dl>
          <dt>
          <label for="idNomade" style="font-size: 15px;">idNomade</label>
          </dt>
          <dd><input type="text" id="idNomade"  class="idNomade required" name="idNomade" /></dd></dd>
          </dl>
      
      <div id="submit_buttons">
        <button type="reset" style="font-size: 10px;">Effacer</button>
        <button type="submit" style="font-size: 10px;">Valider</button>
      </div>
        
        </fieldset>
  </form>
        
        
        
        
      </div> 

      
      
     
    
      
    </div> <!-- End #tab2 -->        
    
  </div> <!-- End .content-box-content -->

  {/block}
